<script setup>
  const props = defineProps({
    value: String || Object,
    name: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: String,
    rules: {
      type: Array,
      default: () => []
    },
    funIcon: {
      type: Boolean,
      default: false
    }
  })

  const emit = defineEmits(['update:value'])
  const isFocus = ref(false)
  const showPassword = ref(false)

  const cValue = computed({
    get() {
      return props.value
    },
    set(val) {
      emit('update:value', val)
    }
  })
  const rightIcon = computed(() => {
    if(props.type==='text') return ''
    if(props.type==='password') {
      return showPassword.value?'eye-o':'closed-eye'
    }
  })
</script>

<template>
  <div :class="['c-input', cValue || isFocus?'active':'']">
    <span class="tag" v-show="cValue || isFocus">{{props.placeholder}}</span>
    <van-field
      :placeholder="props.placeholder"
      :class="[cValue || isFocus?'active-field':'']"
      :name="props.name"
      @focus="isFocus=true"
      @blur="isFocus=false"
      v-model.trim="cValue"
      :rules="props.rules"
      :type="showPassword?'text':props.type"
      :right-icon="rightIcon"
      @click-right-icon="showPassword=!showPassword"
      autocomplete="off"
    >
      <template #button v-if="props.funIcon">
        <slot></slot>
      </template>
    </van-field>
  </div>
</template>

<style lang="scss">
.c-input {
  position: relative;
  .tag {
    display: block;
    padding: 0 5px;
    background: #FFFFFF;
    left: 7px;
    top: -9px;
    z-index: 99;
    font-size: 12px;
    color: #8C8C8C;
    position: absolute;
    transition: display .5s;
  }
  .van-field {
    padding: 0;
    .van-field__body {
      height: 44px;
      border: 1px solid #E5E5E5;
      border-radius: 2px;
      padding: 0 12px;
    }
    .van-field__value {
      padding-bottom: 16px;
    }
    .van-field__error-message {
      position: absolute;
      top: 40px;
      left: 0;
    }
    .van-field__button {
      padding: 0;
      margin-right: -12px;
      .van-button--default {
        border: 0;
        padding-right: 11px;
        padding-left: 11px;
        .van-button__text {
          text-decoration: underline;
        }
      }
    }
  }
  &.active{
    .van-field__body  {
      border-color: #262626;
    }
  }
}
</style>